{% extends "app/base_site.html" %}

{% block title %} 关于系统 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
  <style>
    .version-container {
      padding: 20px;
      background: #f5f7fa;
      min-height: calc(100vh - 100px);
    }
    
    .modern-card {
      background: white;
      border-radius: 8px;
      padding: 20px 24px;
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      transition: all 0.3s ease;
    }
    
    .modern-card:hover {
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #eef2f5;
    }
    
    .card-header i {
      margin-right: 8px;
      color: #169F85;
      font-size: 16px;
    }
    
    .card-header h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      color: #2c3e50;
    }
    
    .system-info-item {
      display: flex;
      align-items: center;
      padding: 5px 8px;
      margin-bottom: 3px;
      background: #f9fafb;
      border-radius: 4px;
      transition: all 0.2s;
    }
    
    .system-info-item:hover {
      background: #f3f4f6;
    }
    
    .info-icon {
      width: 28px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      border-radius: 4px;
      margin-right: 10px;
      font-size: 14px;
      color: #169F85;
    }
    
    .info-content {
      flex: 1;
    }
    
    .info-label {
      font-size: 12px;
      color: #6b7280;
      margin-bottom: 2px;
      font-weight: 500;
    }
    
    .info-value {
      font-size: 12px;
      color: #374151;
      font-weight: 500;
    }
    
    .btn-check {
      width: 100%;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 500;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
      margin-top: 8px;
      background: linear-gradient(135deg, #169F85 0%, #14b89a 100%);
      color: white;
    }
    
    .btn-check:hover {
      box-shadow: 0 3px 8px rgba(22, 159, 133, 0.3);
      transform: translateY(-1px);
    }
    
    .btn-check i {
      margin-right: 6px;
    }
    
    .author-section {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid #eef2f5;
    }
    
    .author-link {
      display: inline-flex;
      align-items: center;
      padding: 6px 12px;
      font-size: 12px;
      color: #606266;
      text-decoration: none;
      background: #f9fafb;
      border-radius: 4px;
      transition: all 0.2s;
    }
    
    .author-link:hover {
      background: #f3f4f6;
      color: #169F85;
      text-decoration: none;
    }
    
    .author-link i {
      margin-right: 6px;
    }
    
    .version-result {
      min-height: 300px;
    }
    
    .version-item {
      background: #fefce8;
      border: 1px solid #fef08a;
      border-radius: 4px;
      padding: 16px;
      margin-bottom: 12px;
    }
    
    .version-header {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid #fef08a;
    }
    
    .version-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      background: #eab308;
      color: white;
      border-radius: 3px;
      font-size: 11px;
      font-weight: 600;
      margin-right: 10px;
    }
    
    .version-title {
      font-size: 13px;
      font-weight: 600;
      color: #713f12;
      flex: 1;
    }
    
    .version-date {
      font-size: 11px;
      color: #a16207;
      display: flex;
      align-items: center;
    }
    
    .version-date i {
      margin-right: 4px;
    }
    
    .update-list {
      margin: 0;
      padding-left: 20px;
    }
    
    .update-item {
      padding: 3px 0;
      font-size: 12px;
      color: #57534e;
      line-height: 1.6;
    }
    
    .version-actions {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid #fef08a;
      display: flex;
      gap: 8px;
    }
    
    .btn-link {
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 500;
      border-radius: 4px;
      text-decoration: none;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    
    .btn-link:hover {
      text-decoration: none;
    }
    
    .btn-download {
      background: linear-gradient(135deg, #169F85 0%, #14b89a 100%);
      color: white;
      text-decoration: none;
    }
    
    .btn-download:hover {
      box-shadow: 0 3px 8px rgba(22, 159, 133, 0.3);
      color: white;
      transform: translateY(-1px);
      text-decoration: none;
    }
    
    .btn-history {
      background: white;
      color: #606266;
      border: 1px solid #dcdfe6;
      text-decoration: none;
    }
    
    .btn-history:hover {
      color: #169F85;
      border-color: #169F85;
      background: #f0f9f6;
      text-decoration: none;
    }
    
    .no-update {
      text-align: center;
      padding: 60px 20px;
    }
    
    .no-update-icon {
      width: 60px;
      height: 60px;
      line-height: 60px;
      margin: 0 auto 12px;
      background: #f0fdf4;
      border-radius: 50%;
      color: #22c55e;
      font-size: 28px;
    }
    
    .no-update-title {
      font-size: 13px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 6px;
    }
    
    .no-update-desc {
      font-size: 12px;
      color: #6b7280;
      margin-bottom: 16px;
    }
    
    .loading-state {
      text-align: center;
      padding: 60px 20px;
    }
    
    .loading-spinner {
      display: inline-block;
      width: 32px;
      height: 32px;
      border: 3px solid #e5e7eb;
      border-top: 3px solid #169F85;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 12px;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .loading-text {
      font-size: 12px;
      color: #6b7280;
    }
    
    .right_col {
      background: #f5f7fa !important;
    }
  </style>
{% endblock stylesheets %}

{% block content %}
  <div class="right_col" role="main">
    <div class="version-container">
      <div class="row">
        <!-- 左侧：关于系统 -->
        <div class="col-md-4 col-sm-12">
          <div class="modern-card">
            <div class="card-header">
              <!--<i class="fa fa-cube"></i>-->
              <h3>关于系统</h3>
            </div>
            
            <div class="system-info-item">
              <div class="info-icon icon-app">
                <i class="fa fa-desktop"></i>
              </div>
              <div class="info-content">
                <div class="info-label">应用名称</div>
                <div class="info-value">{{ settings.name }}</div>
              </div>
            </div>
            
            <div class="system-info-item">
              <div class="info-icon icon-version">
                <i class="fa fa-tag"></i>
              </div>
              <div class="info-content">
                <div class="info-label">软件版本</div>
                <div class="info-value">v{{ project_version }}</div>
              </div>
            </div>
            
            <div class="system-info-item">
              <div class="info-icon icon-flag">
                <i class="fa fa-bookmark"></i>
              </div>
              <div class="info-content">
                <div class="info-label">软件标记</div>
                <div class="info-value">{{ project_flag }}</div>
              </div>
            </div>
            
            {% if settings.is_show_author == 1 %}
            <div class="author-section">
              <a href="{{ settings.author_link }}" target="_blank" class="author-link">
                <i class="fa fa-user-circle"></i> {{ settings.author }}
              </a>
            </div>
            {% endif %}
            
            <button onclick="f_openCheckVersion()" class="btn-check">
              <i class="fa fa-refresh"></i> 检测新版本
            </button>
          </div>
        </div>
        
        <!-- 右侧：版本检测结果 -->
        <div class="col-md-8 col-sm-12">
          <div class="modern-card">
            <div class="card-header">
              <!--<i class="fa fa-list-alt"></i>-->
              <h3>版本检测结果</h3>
            </div>
            
            <div class="version-result" id="versionResult">
              <div class="loading-state">
                <div class="loading-spinner"></div>
                <div class="loading-text">正在检测版本...</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}

{% block javascripts %}
  {{ block.super }}
  <script>
    let eleResult = $("#versionResult");
    
    function f_openCheckVersion() {
      eleResult.html(`
        <div class="loading-state">
          <div class="loading-spinner"></div>
          <div class="loading-text">正在检测版本...</div>
        </div>
      `);
      
      $.ajax({
        url: '/version/openCheckVersion',
        type: "get",
        async: true,
        data: {},
        dataType: "json",
        timeout: 0,
        error: function () {
          eleResult.html(`
            <div class="no-update">
              <div class="no-update-icon">
                <i class="fa fa-exclamation-circle"></i>
              </div>
              <div class="no-update-title">网络异常</div>
              <div class="no-update-desc">请检查网络连接后重试</div>
            </div>
          `);
          myToast2025("网络异常，请确定网络正常！", "error");
        },
        success: function (res) {
          let info = res.info;
          let historyVersionUrl = info.historyVersionUrl;
          
          if (1000 === res.code) {
            // 发现新版本
            let version = info.version.toString();
            let updateContent = info.updateContent;
            let pubdate = info.pubdate;
            let url = info.url;
            
            let html = `
              <div class="version-item">
                <div class="version-header">
                  <span class="version-badge">
                    <i class="fa fa-rocket"></i> NEW
                  </span>
                  <span class="version-title">发现新版本 v${version}</span>
                  <span class="version-date">
                    <i class="fa fa-clock-o"></i>${pubdate}
                  </span>
                </div>
                <ul class="update-list">
            `;
            
            for (let i = 0; i < updateContent.length; i++) {
              html += `<li class="update-item">${updateContent[i]}</li>`;
            }
            
            html += `
                </ul>
                <div class="version-actions">
                  <a href="${url}" target="_blank" class="btn-link btn-download">
                    <i class="fa fa-download"></i> 下载新版本
                  </a>
                  <a href="${historyVersionUrl}" target="_blank" class="btn-link btn-history">
                    <i class="fa fa-archive"></i> 历史版本
                  </a>
                </div>
              </div>
            `;
            
            eleResult.html(html);
          } else {
            // 未发现新版本
            let html = `
              <div class="no-update">
                <div class="no-update-icon">
                  <i class="fa fa-check-circle"></i>
                </div>
                <div class="no-update-title">${res.msg}</div>
                <div class="no-update-desc">您已经使用最新版本</div>
            `;
            
            if (historyVersionUrl) {
              html += `
                <a href="${historyVersionUrl}" target="_blank" class="btn-link btn-history">
                  <i class="fa fa-archive"></i> 查看历史版本
                </a>
              `;
            }
            
            html += `</div>`;
            eleResult.html(html);
          }
        }
      });
    }
    
    window.onload = function () {
      f_openCheckVersion();
    };
  </script>
{% endblock javascripts %}
